import React, { Component } from 'react';
import { Text, View, StyleSheet, Dimensions } from 'react-native';
import { Marquee, Label } from 'iftide';

export default class Basic extends Component {
  
    textpress1(index) {
        alert("文本点击！"+index);
    }

    rightIconFunc() {
        //组件内部开放的关闭方法  _close()
        this.marqueeRef1._close();
    }
  
    render() {
        let componentArray1 = [
            <View key='1' style={styles.viewCon}><Text style={{color: '#333'}}>测试标题测试标题1</Text></View>,
            <View key='2' style={styles.viewCon}><Text style={{color: '#333'}}>测试标题测试标题2</Text></View>,
            <View key='3' style={styles.viewCon}><Text style={{color: '#333'}}>测试标题测试标题3</Text></View>,
            <View key='4' style={styles.viewCon}><Text style={{color: '#333'}}>测试标题测试标题4</Text></View>,
            // <View key='5' style={styles.viewCon}><Text style={{color: '#333'}}>测试标题测试标题5</Text></View>,
            // <View key='6' style={styles.viewCon}><Text style={{color: '#333'}}>测试标题测试标题6</Text></View>,
        ];
        return (
            <View>
                <View style={{paddingVertical: 10, paddingHorizontal: 13, flexDirection: 'row', alignItems: 'center'}}>
                    <View style={{width: 8, height: 8, backgroundColor: '#ff7b7b', marginRight: 8}}></View>
                    <Label text={'走马灯 - 普通水平滚动'} labelStyle={{fontSize: 15, color: '#333'}}/>
                </View>
                <Marquee
                    leftIcon={require('./Icon.png')}
                    showClose={true}
                    scroll={true}
                    showLine={true}
                    duration={10}
                    text={['测试标题测试进行中7686','测试标题测试进行中123','测试进行中908','测试进行中298','测试标题测试进行中110','测试标题测试进行中12']}
                    textFunc={(index)=>this.textpress1(index)}
                />
                <View style={{paddingVertical: 10, paddingHorizontal: 13, flexDirection: 'row', alignItems: 'center'}}>
                    <View style={{width: 8, height: 8, backgroundColor: '#ff7b7b', marginRight: 8}}></View>
                    <Label text={'走马灯 - 自定义水平滚动组件'} labelStyle={{fontSize: 15, color: '#333'}}/>
                </View>
                <Marquee
                    conWidth={Dimensions.get('window').width}
                    delay={2}
                    duration={8}
                    backgroundColor={'#d8d8d8'}
                    scrollComponent={componentArray1}
                />
                <View style={{paddingVertical: 10, paddingHorizontal: 13, flexDirection: 'row', alignItems: 'center'}}>
                    <View style={{width: 8, height: 8, backgroundColor: '#ff7b7b', marginRight: 8}}></View>
                    <Label text={'走马灯 - 水平支持自定义ICON'} labelStyle={{fontSize: 15, color: '#333'}}/>
                </View>
                <Marquee
                    ref={(c) => this.marqueeRef1 = c}
                    leftIcon={require('./Icon.png')}
                    rightIcon={require('./arrow.png')}
                    rightIconFunc={()=>this.rightIconFunc()}
                    duration={5}
                    text={['测试标题测试进行中-测试标题测试进行中-测试标题测试进行中']} 
                />
                <View style={{paddingVertical: 10, paddingHorizontal: 13, flexDirection: 'row', alignItems: 'center'}}>
                    <View style={{width: 8, height: 8, backgroundColor: '#ff7b7b', marginRight: 8}}></View>
                    <Label text={'走马灯 - 停止滚动'} labelStyle={{fontSize: 15, color: '#333'}}/>
                </View>
                <Marquee
                    leftIcon={require('./Icon.png')}
                    showClose={true}
                    scroll={false}
                    showLine={true}
                    text={['测试标题测试进行中-测试标题测试进行中']} 
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    viewCon: {
        justifyContent: 'center',
        height: 44
    }
})